<template>
  <div class="app-container">

    <div id="editor">
      <!-- 可以修改标题和简介-->
      <el-form label-width="120px" :model="editForm" ref="editForm">


        <el-col :span="18" :xs="24">
          <el-form-item label="Blog标题：" prop="blogTitle" >
            <el-input  v-model="editForm.blogTitle" auto-complete="off" placeholder="请输入博客标题"></el-input>
          </el-form-item>
          <el-form-item label="Blog简介：" prop="blogIntro">
            <el-input  v-model="editForm.blogIntro" auto-complete="off" placeholder="请输入博客内容简介"></el-input>
          </el-form-item>
          <el-form-item label="Blog标签选择：" prop="blogTag" >
            <el-col :span="6" :xs="24">
              <el-select v-model="editForm.blogTag" placeholder="请选择标签">
                <el-option
                  v-for="item in tagOptions"
                  :key="item.tagId"
                  :label="item.tagName"
                  :value="item.tagId">
                  <!--            v-model的值为当前被选中的el-option的 value 属性值  -->
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-col :span="6" :xs="24">
            <el-button type="primary"  class="title" @click="submitForm('editForm')" :span="6" :xs="24">保存</el-button>
          </el-col>
        </el-col>


        <el-col :span="6" :xs="24">
          <el-form-item label="Blog封面选择："  >
            <upload-cover @submit-url="updateCoverUrl"></upload-cover>
          </el-form-item>
        </el-col>
        <el-col :span="24" :xs="24">
            <mavon-editor
              style="width:100%;height: 700px ;z-index:auto;"
              :html="true"
              v-model="editForm.blogContent"
              :xssOptions="{
                whiteList: {
                    iframe: ['src', 'height', 'width', 'scrolling','allowfullscreen','frameborder'],
                    div: ['style', 'height', 'width', 'align'],
                    img: ['src', 'height', 'width','style', 'align']
                  }
              }"
            ></mavon-editor>
        </el-col>
      </el-form>



    </div>
  </div>



</template>

<script>

import {blogAdd} from "@/api/blog";
import {tagsGet} from "@/api/tag";

import uploadCover from "@/views/blog/uploadCover";

export default {
  name: 'editor',
  components: {
    uploadCover
  },
  data(){
    return {
      tagOptions: [

      ],
      value: '',
      editForm: {
        blogId: '',
        blogIntro: '',
        blogTitle: '',
        blogContent: '',
        blogTag: '',
        blogCover: ''
      }
    }
  },
  created() {
    this.getAllTags()
  },
  methods:{
    getAllTags() {
      tagsGet().then(
        res => {
          if (res.code===0){
            this.tagOptions = res.data
          }else {
            /*其他故障*/
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        }
      );
    },
    submitForm(){

      if (this.editForm.blogTag===''){
        this.editForm.blogTag = '1';
      }
      blogAdd(this.editForm)
        .then(res => {
          // this.editFormVisible = false
          // this.loading = false
          if (res.code===0) {
            // this.getdata(this.formInline)
            this.$message({
              type: 'success',
              message: 'blog保存成功！'
            })

            this.editForm= {
              blogId: '',
              blogIntro: '',
              blogTitle: '',
              blogContent: '',
              blogTag: '',
            }

          } else {
            /*其他故障*/
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.editFormVisible = false
          this.loading = false
          this.$message.error('blog保存失败，请稍后再试！error:'+err.toString())
        })
    },
    updateCoverUrl(para){
      this.editForm.blogCover = para;
    }

  }
}
</script>

<style scoped>

#editor {
  height: auto;
  margin: auto;
  width: 100%;
}
</style>
